<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当.首页</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
      <link rel="stylesheet" href="../lib/font/iconfont.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
    <!-- 头部版心 -->
    <div class="header-con">
    <!-- 头部版心左 -->
    <div class="header-con-left">
      <li>
          <a href="">
            <span>送至：北京</span>
          </a>
        </li>
    </div>
    <!-- 头部版心右 -->
    <div class="header-con-right">
            <li>欢迎光临当当，请
          <a href="login.html" target="_blank">
            <span style="color:red;">登录</span>
          </a>
        </li>
        <li>
          <a href="">
            <span>成为会员</span>
          </a>
        </li>
        <li>|</li>
        <li>
          <a href="">
            <span>我的云书房</span>
          </a>
        </li>
        <li>|</li>
        <li>
          <a href="">
            <span>我的当当</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>0元领物</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>小说投稿</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>我要出书</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>企业采购</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>客户服务</span>
          </a>
        </li>
      </ul>
    </div>
    </div>
    </div>
      <!--导航 -->
    <div id="nav">

    <!--导航版心  -->
   <div class="nav-con">

   <!--导航版心上  -->
   <div class="nav-con-top">
   <img src="http://img61.ddimg.cn/upload_img/00405/luyi/DDlogoNEW.gif" style="background:red;">

   <!-- 搜索框 -->
   <div class="nav-search">
   <input type="text" value="三年级课外阅读必读书">
   <button><i class="iconfont icon-fangdajing"></i></button>
   </div>
   <a  href="cart.html" target="_blank"> <i class="iconfont icon-qicheqianlian-"></i> 购物车</a>
   </div>
    <!-- 导航版心下 二级渲染 -->
      <ul class="nav-cen">
        <li class="lil" style="margin-left:0px;">
          全部商品分类 
          <i class="iconfont icon-arrow-left" style="margin-left:80px;font-size:16px;"></i>
          <div class="category-list clearfix">
          <p>1</p>
          </div>
        </li>
        <li><a href="">图书</a></li>
        <li><a href="">电子书</a></li>
        <li><a href="">网络文学</a></li>
        <li><a href="">服装</a></li>
        <li><a href="">运动户外</a></li>
        <li><a href="">运婴童</a></li>
        <li><a href="">家具</a></li>
        <li><a href="">当当优品</a></li>
        <li><a href="">食品</a></li>
        <li><a href="">Apple</a></li>
        <li><a href="">电器城</a></li>
      </ul>
   </div> 
   </div>
   <!-- banner部分 -->
   <div id="banner">
   <div class="banner-nav">
   <ul>
    <li style="margin-left:0px;"><a href="list.html" target="_blank">图书排行榜</a></li>
    <li>|</li>
     <li><a href="">童书</a></li>
    <li>|</li>
     <li><a href="">教辅</a></li>
    <li>|</li> 
    <li><a href="">小说</a></li>
    <li>|</li>
     <li><a href="">文字</a></li>
    <li>|</li>
     <li><a href="">青春文学</a></li>
    <li>|</li>
     <li><a href="">艺术</a></li>
    <li>|</li>
     <li><a href="">成功励志</a></li>
    <li>|</li>
     <li><a href="">管理</a></li>
    <li>|</li>
     <li><a href="">历史</a></li>
    <li>|</li>
     <li><a href="">哲学宗教</a></li>
    <li>|</li> 
     <li><a href="">亲子家教</a></li>
    <li>|</li>
     <li><a href="">保健养生</a></li>
    <li>|</li>
     <li><a href="">考试</a></li>
    <li>|</li>
     <li><a href="">科技</a></li>
    <li>|</li>
     <li><a href="">进口原版</a></li>
    <li>|</li>
     <li><a href="">电子书</a></li>
    <li>|</li>
    <li><a href="">网络文学</a></li>
   </ul>
    <img src="../images/index1_03.jpg" style="margin-top:15px;">
   </div>
  
  <div class="banner-con">
   <div class="banner-left">
 <div class="content-list">
					<a href="list.html"></a>
				</div>
				<!-- 二级菜单渲染 -->
				<div class="content-l">
					<a href="list.html">
						<ul>
							<li>特色书单<span>></span></li>
							<li><a href="">电子书</a>
                                <a href="">网络文学</a>
                                <a href="">阅读器</a>
                            <span>></span>
                            </li>
							<li>教育<span>></span>
                            <br>
                            <icon>
                             <a href="">教育</a>&nbsp;|
                             <a href="">外语</a>&nbsp;|
                             <a href="">考试</a>&nbsp;|
                             <a href="">中小学教辅</a>&nbsp;|
                             <a href="">工具书</a>
                            </i>
                            </li>
							<li>小说<span>></span>
                            </li>
							<li>文艺<span>></span>
                            <br>
                             <i>
                             <a href="">文学</a>&nbsp;|
                             <a href="">传记</a>&nbsp;|
                             <a href="">艺术</a>&nbsp;|
                             <a href="">摄影</a>
                            </i>
                            </li>
							<li>青春文学/动漫.幽默<span>></span></li>
							<li>童书<span>></span>
                             <br>
                             <i>
                             <a href="">0-2</a>&nbsp;|
                             <a href="">3-6</a>&nbsp;|
                             <a href="">7-10</a>&nbsp;|
                             <a href="">11-14</a>&nbsp;|
                             <a href="">科普/百科</a>&nbsp;|
                             <a href="">绘本</a>&nbsp;|
                             <a href="">文学</a>&nbsp;|
                             <a href="">英语</a>&nbsp;|
                            </i>
                            </li>
							<li>人文社科<span>></span>
                             <br>
                             <i>
                             <a href="">历史</a>&nbsp;|
                             <a href="">古籍</a>&nbsp;|
                             <a href="">哲学/宗教</a>&nbsp;|
                             <a href="">文化</a>&nbsp;|
                             <a href="">政治/军事</a>&nbsp;|
                             <a href="">法律</a>&nbsp;|
                             <a href="">社会科学</a>&nbsp;|
                             <a href="">心理学</a>
                            </i>
                            </li>
							<li>经管<span>></span>
                            <br>
                             <i>
                             <a href="">经济</a>&nbsp;|
                             <a href="">管理</a>&nbsp;|
                             <a href="">投资理财</a>&nbsp;|
                            </i>
                            </li>
							<li>成功/励志<span>></span></li>
                            <li>生活<span>></span>
                            <br>
                             <i>
                             <a href="">两性</a>&nbsp;|
                             <a href="">孕期</a>&nbsp;|
                             <a href="">育儿</a>&nbsp;|
                             <a href="">亲子/家教</a>&nbsp;|
                             <a href="">保健</a>&nbsp;|
                             <a href="">运动</a>&nbsp;|
                             <a href="">美妆</a>&nbsp;|
                             <a href="">手工</a>&nbsp;|
                             <a href="">美食</a>&nbsp;|
                             <a href="">旅游</a>&nbsp;|
                             <a href="">休闲</a>&nbsp;|
                             <a href="">家居</a>
                            </i>
                            </li>
                             <li>科技<span>></span>
                            <br>
                             <i>
                             <a href="">科普</a>&nbsp;|
                             <a href="">建筑</a>&nbsp;|
                             <a href="">医学</a>&nbsp;|
                             <a href="">计算机</a>&nbsp;|
                             <a href="">农林</a>&nbsp;|
                             <a href="">自然科学</a>&nbsp;|
                             <a href="">工业</a>
                            </i>
                            </li>
                            <li>英文原版书 港台图书<span>></span></li>
                             <li>当当出版<span>></span></li>
                             <li>期刊/音像<span>></span></li>
                             <li>创意文具<span>></span></li>
						</ul>
					</a>
				</div>
   </div>
   
      <!-- 中间轮播图 -->
  <div class="banner-center">
  <div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../images/banner1.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner2.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner3.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner4.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner5.jpg" width="938px" alt="" /></div>
            <div class="swiper-slide"><img src="../images/banner6.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner7.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner8.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner9.jpg" width="938px" alt="" /></div>
						<div class="swiper-slide"><img src="../images/banner10.jpg" width="938px" alt="" /></div>
            <div class="swiper-slide"><img src="../images/banner11.jpg" width="938px" alt="" /></div>
            <div class="swiper-slide"><img src="../images/banner12.jpg" width="938px" alt="" /></div>
					</div>
					<div class="swiper-button-prev prev"></div>
					<div class="swiper-button-next next"></div>
					<div class="swiper-pagination"></div>
          <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', 
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
				</div>
        <div class="banner-list">
        <p>新书上架</p>
        <hr>
        </div>
			</div>
   <div class="banner-right">
   
   </div>
  </div>
   </div>
   </div>
   
   <!-- 回到顶部 -->
  <p class="goTop">回到顶部</p>
  <script>
  $(window).scroll(() => {
      // 通过判断卷去的高度来决定
      if ($(window).scrollTop() >= 300) {
        // 让回到顶部按钮显示
        $('p').fadeIn()
      } else {
        // 让回到顶部按钮隐藏
        $('p').fadeOut()
      }
    })
    $('.goTop').click(() => {
      $('html').animate({
        scrollTop: 0
      }, 1000)
    })
  </script>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../js/index.js"></script>
</body>
</html>